{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">

                        <div class="col-md-5">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">社群审核数据</div>
                                    </div>
                                    <div class="d-fix">
                                        <canvas id="state1" width="112" height="112"></canvas>
                                        <canvas id="state2" width="112" height="112"></canvas>
                                        <canvas id="state3" width="112" height="112"></canvas>
                                    </div>
                                    <div class="fix-d">
                                        <div class="d-th">
                                            <div class="numer t">9650</div>
                                            <div class="d-str">已审核通过</div>
                                            <div class="d-add">占所有社群的78%</div>
                                        </div>
                                        <div class="d-th">
                                            <div class="numer b">5</div>
                                            <div class="d-str">驳回社群</div>
                                            <div class="d-add">占所有社群的20%</div>
                                        </div>
                                        <div class="d-th">
                                            <div class="numer w">2</div>
                                            <div class="d-str">未审核社群</div>
                                            <div class="d-add">占所有社群的2%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                </div>
            </div>

            <div class="list">
                <div class="uname">社群列表</div>
                <div class="app-block">
                    <div class="app-content">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>




            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script type="text/html" id="associateTpl">
    {{# if(d.associate == 1) { }}
    <span>公众号</span>
    {{# } else if(d.associate == 2) { }}
    <span>小程序</span>
    {{# } else { }}
    <span>已合并</span>
    {{# } }}
</script>

<script type="text/html" id="statusTpl">
    {{# if(d.status == 1) { }}
    <span>已授权</span>
    {{# } else { }}
    <span>未授权</span>
    {{# } }}
</script>
<script src="__STATIC__/assets/js/custom.js"></script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="switch_state" {{ d.state == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barDemo">
    <button lay-event="upgrade" onclick="upgrade({{d.id}})" class="btn btn-sm btn-outline-secondary">升级会员</button>

</script>
<script>
    // layui插件
    layui.use('table', function() {
        var table = layui.table
            , form = layui.form;
        // 表格初始化
        table.render({
            elem: '#linkstable'
            , url: '{:url("/console/user")}'
            , method: 'post'
            , page: true //开启分页
            , cols: [[
                {field: 'id', title: 'ID'}
                , {
                    field: 'headimg', title: '头像', width: 80, templet: function (d) {
                        return '<div onclick="show_img(this)" ><img src="' + d.headimg + '" ' + 'alt="" width="60px" height="60px"></div>';
                    }
                }
                , {field: 'nickname', title: '昵称'}
                , {field: 'associate', title: '所在端', templet: '#associateTpl', unresize: true}
                , {field: 'state', title: '状态', templet: '#switchTpl', unresize: true}
                , {field: 'status', title: '授权', templet: '#statusTpl', unresize: true}
                , {field: 'create_time', title: '注册时间'}
                , {field: 'statistics', title: '统计', width: 250, align: 'left'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]],
            done: function (res) {
                var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                element.css('overflow', 'visible');
                element.children('.dropdown-menu').css('min-width', 'auto');
            },
            parseData: function (res) {
                return {
                    "code": res.data.code,
                    "msg": res.data.msg,
                    "count": res.data.count,
                    "data": res.data.list
                };
            }
        });
    })
    let labels = [];
    let label1 = []
    for (var i = 0;i < 31;i++){
        labels.push(i);
        label1.push(parseInt(Math.random()*i+1,10));
    }

    var ctx = document.getElementById("post")
    var data = {
        labels : labels,
        datasets : [
            {
                label:'',
                backgroundColor:'#F2FBFF',
                borderColor: "#5B78FF", //路径颜色
                pointBackgroundColor: "#5B78FF", //数据点颜色
                pointBorderColor: "#fff", //数据点边框颜色
                data : label1,
                borderWidth:'2',
                pointRadius:0
            },

        ],

    }
    new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            legend:{display:false},
            scales: {
                yAxes: [{
                    tension: 0,
                    max: 50
                }],
                xAxes: [
                    {
                        gridLines:{display:false }
                    }
                ]
            }
        }
    });


    var chartDom = document.getElementById('state1');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: 50 + '%',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: 50,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#5B78FF'},
                                    {offset: 0.5, color: '#4A39ED'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: 100 - 90,
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };

    myChart.setOption(option);


    var chartDom = document.getElementById('state2');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: 50 + '%',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果

            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: 50,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#FF4438'},
                                    {offset: 0.5, color: '#FFA13B'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: 100 - 50,
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);



    var chartDom = document.getElementById('state3');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: 'center',
                style: {
                    //value当前进度
                    text: 50 + '%',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果

            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: 50,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [{offset: 0, color: '#322FFD'},
                                    {offset: 0.5, color: '#00C7FF'}])
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: 100 - 50,
                    itemStyle: {
                        normal: {
                            color: '#E0E0E0'
                        }
                    }
                }
            ]
        }]
    };
    myChart.setOption(option);
    //切换
    function commtype(t,e) {
        $('.sel-bottom').removeClass('avt');
        $(e).addClass('avt');
        type = t;
        keyword = '';
        $('input[name=keyword]').val('');
        window.history.replaceState(null,null,'./index1.html?type='+type);
    }
    function add() {
        window.location.href = '{:url("/resource/resourceadd")}';
    }
</script>
<style>
    .add {
        background: rgba(63, 110, 255, 0) !important;
        border: 1px solid #3F6EFF;
        border-radius: 6px;
        color: #3F6EFF !important;
    }
    .sel-dfx {
        display: flex;
        justify-content: space-between;
        margin: auto;
    }
    .sel-mat-top{
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .avt{
        background: #3F6EFF !important;
        color: #FFFFFF !important;
    }
    .sel-bottom{
        background: #F0F0F0;
        border-radius: 3px;
        cursor: pointer;
        color: #999999;
        line-height: 32px;
        height: 32px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .sel-bottom:active{
        background: #3377FF;
    }

    .card-dth {
        padding: 8px;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;

    }
    .bg-txt {
        display: flex;
        margin-top: 5px;
    }


    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }


    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        padding-bottom: 20px;
    }
    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    .dy{
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }
    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }
    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }
    .txt-cen {
        text-align: center;
    }
    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }
    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }
    .fix-d {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
    }
    .d-th {
        padding-left: 10px;
        text-align: center;
    }
    .numer {
        font-size: 21px;
        font-family: 'AliM';
        font-weight: 600;
    }
    .t {
        color: #576AFB;
    }
    .d-str {
        font-size: 12px;
        font-family: 'AliM';
        margin-top: 5px;
    }
    .d-add {
        font-size: 11px;
        color: #999999;
        margin-top: 5px;
    }
    .b {
        color: #FF6739;
    }
    .w {
        color: #00A0FF;
    }
    .keword{
        display: flex;
    }
    .key-input{
        padding-left: 8px;
        border: 1px solid #e2d7d7;
        border-radius: 6px;
        width: 200px;
    }
    .key-bottom{
        margin-left: 10px;
        background: #007bff;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 34px;
        line-height: 30px;
        color: white;
        height: 30px;
        margin-top: 5px;
        cursor:pointer
    }
    .key-bottom:active{
        background: #71a2d8;
    }
</style>
</body>
</html>
